<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    router
    @close="handleClose"
    text-color="black"
    active-text-color="black"
    style="text-align:left;background-color: rgb(255, 255, 255);"
    
  >
    <template v-for="item in menuList">
      <template v-if="item.children && item.children.length > 0">
        <el-submenu :index="String(item.id)" :key="item.id"  >
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{ item.menuName }}</span>
          </template>
          <side-menu :menuList="item.children" :key="item.id" ></side-menu> <!-- 递归调用子菜单组件 -->
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item :index="item.path" :key="item.id">
          <i :class="item.icon"></i>
          <span>{{ item.menuName }}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>
<script>

export default {
  name: "SideMenu",
  props: {
    menuList: {
      type: Array,
      required: true,
    },
  },
  methods: {
    handleOpen() {
      // 处理菜单打开事件
    },
    handleClose() {
      // 处理菜单关闭事件
    },
  },
};
</script>

<style>
/* 样式定义 */
.el-menu-item:hover{
	  background: rgb(93, 142, 255)!important;
	  color: rgb(255, 255, 255)!important;
	}
	.el-submenu__title:hover {
	  background: rgb(93, 142, 255)!important;
	  color: rgb(255, 255, 255)!important;
	}
	.el-menu-item.is-active {
	  background: rgb(93, 142, 255)!important;
	  color: rgb(255, 255, 255)!important;
	}
	.el-submenu__title.is-active {
	  background: rgb(93, 142, 255)!important;
	  color: rgb(255, 255, 255)!important;
	}
</style>
